<template>
	<view>
		<view class="search-cont">
			<view class="search">
				<input type="text" placeholder-class="inputclass" confirm-type="search" focus="true"
					placeholder="请输入关键字" v-model="searchdata" @confirm="seArch()" />
			</view>
			<view class="search-code" @click="seArch()">
				搜索
			</view>
		</view>
		
		<!-- 搜索历史 -->
		<view class="search-history" v-if="ifhistory">
			<view class="search-title">
				<view>搜索历史</view>
				<view @click="removeStorage()">
					<image src="../../static/coen/searchend.svg" mode="widthFix"></image>
				</view>
			</view>
			<!-- tab -->
			<view class="menu-block">
				<block v-for="(item,index) in setdata" :key="index">
						<view :class="{activetext:index==num}" @click="menubtn(item)">
						{{item}}	
						</view>
				</block>
				
			</view>
		</view>
		<!-- 内容展示 -->
		<view class="content-left" v-if="shopcont">
			<block v-for="(item,index) in takeshop" :key="index">
				<view class="content-view">
					<view class="content-img">
						<image :src="item.logo" mode="aspectFill"></image>
					</view>
					<view class="content-title">
						<text class="conteng-take">{{item.shop}}</text>
						<view class="conteng-monthly">
							<text>月售200</text>
							<text>约{{item.duration}}分钟</text>
						</view>
						<view class="conteng-starting">
							<text>起送￥{{item.delivering}}</text>
							<text>配送￥{{item.physical}}</text>
							<text>人均￥{{item.capita}}</text>
						</view>
						<view class="conteng-starting">
							<image src="../../static/shop.png" mode=""></image>
							<text>{{item.types}}</text>
						</view>
					</view>
				</view>
			</block>
		</view>
		
		<!-- 反馈组件 -->
		<tips ref="tips"></tips>
	</view>
</template>

<script>
	// 引入接口
	import {
		publicing
	} from '../../api/api.js'
	// 引入请求地址
	import {
		searchurl
	} from '../../api/request.js'
	// 引入反馈组件
	import tips from '../../element/tips.vue'
	// es6 解构
	var {
		log
	} = console
	export default {
		components:{
			tips
		},
		data() {
			return {
				// 搜索关键词
				searchdata: '',
				// 搜索结果
				takeshop:[],
				// 搜索历史
				setdata:[],
				// 是否有搜索历史
				ifhistory:false,
				// 内容展示区
				shopcont:false
			}
		},
		methods: {
			// 点击事件搜索
			seArch(e) {
				// console.log(this.searchdata)
				//如果用户没搜索，不出发请求数据
				if(this.searchdata.length!=0){
					let searchkey = this.searchdata || e.detail.value
					this.searchData(searchkey)
					this.getStorage(searchkey)
					this.ifhistory=false
				}
			},
			// 本地存入搜索历史
			getStorage(searchkey){
				// 先取出本地缓存的数据
				// 如果有数组会继续沿用，没有就是空
				let seararray=uni.getStorageSync('search_key') || []
				// 要存入一个数组		
				seararray.unshift(searchkey)
				uni.setStorageSync('search_key',seararray)
			},
			// 取出本地缓存的数据
			setStorage(){
				let setdata=uni.getStorageSync('search_key')
				// 数组去重
				setdata=Array.from(new Set(setdata))
				log(setdata)
				// 如果数组长度存在，渲染代码搜索历史可见，反之不可见
				if(setdata.length){
					this.ifhistory=true
					this.setdata=setdata
				}else{
					this.ifhistory=false
				}
			},
			// 手动清除搜索历史
			removeStorage(){
				uni.removeStorageSync('search_key')
				this.setStorage()
			},
			//搜索历史中请求数据
			menubtn(item){
					this.searchData(item)
					this.ifhistory=false
			},
			// 发送请求搜素
			searchData(searchkey) {
				let data = {
					searchdata: searchkey
				}
				publicing(searchurl, data).then((res) => {
					// log(res.data)
					if(res.data!=='没有商品数据'){
						this.shopcont=true
						this.takeshop=res.data
						this.tising(false,'')
					}else{
						this.tising(true,'您搜索的内容不存在')
						this.shopcont=false
					}
				}).catch((err) => {
					log(err)
				})
			},
			// 反馈提示
			tising(bull,tips){
				this.$nextTick(()=>{
					this.$refs.tips.init(bull,tips)
				})
			}
		},
		created() {
			this.setStorage()
		}
	}
</script>

<style scoped lang="less">
	@import '../../common/meituan.less';

	.content-left {
		margin: 0 20upx;
	}

	.search-cont {
		display: flex;
		justify-content: space-between;
		height: 70upx;
		align-items: center;
		padding: 30upx 0;

		.search {
			height: 70upx;
			line-height: 70upx;
			width: 100%;
			display: flex;
			flex-direction: row;
			background: #f8f8f8;
			border-radius: 20upx;
			margin-left: 20upx;

			input {
				height: 70upx;
				line-height: 70upx;
				width: 100%;
				font-size: 30upx;
				color: #666666;
				padding-left: 30upx;
			}
		}

		.search-code {
			width: 150upx;
			height: 50upx;
			text-align: center;
			font-size: 30upx;
		}
	}

	// 搜索历史
	.search-history {
		margin: 20upx;
		.search-title {
			font-size: 30upx;
			font-weight: bold;
			display: flex;
			justify-content: space-between;
			align-items: center;
			height: 60upx;
			line-height: 60upx;
		
			image {
				width: 36upx;
				height: 36upx;
				display: block;
			}
		}
		.menu-block {
			display: flex;
			flex-direction: row;
			justify-content: flex-start;
			flex-wrap: wrap;
		
			view {
				background: #f7f8fa;
				border-radius: 6upx;
				font-size: 27upx;
				color: #292c33;
				text-align: center;
				padding: 10upx;
				margin: 20upx 20upx 0 0;
			}
		}
		
	}

	
	
</style>
